<!-- 封装菜单组件 -->

<template>
  <el-menu
    background-color="#333744"
    text-color="#fff"
    active-text-color="#409EFF"
    unique-opened
    router
    :collapse="iscollapse"
    :collapse-transition="false"
  >
    <!---------- 首页菜单 ------------->
    <el-menu-item index="/index">
      <i class="iconfont icon-shouye"></i>
      <span class="menu_text">首页</span>
    </el-menu-item>

    <!---------- 车辆管理菜单 ---------->
    <el-submenu index="2">
      <!-- 一级菜单 -->
      <template slot="title">
        <!-- 图标 -->
        <i class="iconfont icon-cheliangguanli"></i>
        <span class="menu_text">车辆管理</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item index="/carhub">
        <i class="iconfont icon-cheliangguanli"></i>
        <span class="menu_text">车辆信息</span>
      </el-menu-item>
    </el-submenu>

    <!---------- 车位管理菜单 ---------->
    <el-submenu index="3">
      <!-- 一级菜单 -->
      <template slot="title">
        <!-- 图标 -->
        <i class="iconfont icon-tingchewei"></i>
        <span class="menu_text">车位管理</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item index="/placehub">
        <i class="iconfont icon-tingchewei"></i>
        <span class="menu_text">车位列表</span>
      </el-menu-item>
    </el-submenu>

    <!---------- 会员管理菜单 ---------->
    <el-submenu index="4">
      <!-- 一级菜单 -->
      <template slot="title">
        <!-- 图标 -->
        <i class="iconfont icon-huiyuanguanli-cengjiguanli"></i>
        <span class="menu_text">会员管理</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item index="/memberhub">
        <i class="iconfont icon-huiyuanguanli-cengjiguanli"></i>
        <span class="menu_text">会员列表</span>
      </el-menu-item>
    </el-submenu>

    <!---------- 订单管理菜单 ---------->
    <el-submenu index="5">
      <!-- 一级菜单 -->
      <template slot="title">
        <!-- 图标 -->
        <i class="iconfont icon-dingdanguanli"></i>
        <span class="menu_text">订单管理</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item index="/orderhub">
        <i class="iconfont icon-dingdanguanli"></i>
        <span class="menu_text">订单列表</span>
      </el-menu-item>
    </el-submenu>

    <!---------- 金额管理菜单 ---------->
    <el-submenu index="6">
      <!-- 一级菜单 -->
      <template slot="title">
        <!-- 图标 -->
        <i class="iconfont icon-jine"></i>
        <span class="menu_text">金额管理</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item index="/totalhub">
        <i class="iconfont icon-jine"></i>
        <span class="menu_text">金额流水</span>
      </el-menu-item>
    </el-submenu>

    <!---------- 操作日记 ---------->
    <el-submenu index="7">
      <!-- 一级菜单 -->
      <template slot="title">
        <!-- 图标 -->
        <i class="iconfont icon-caozuoriji"></i>
        <span class="menu_text">操作日记</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item index="/loghub">
        <i class="iconfont icon-caozuoriji"></i>
        <span class="menu_text">日记列表</span>
      </el-menu-item>
    </el-submenu>

     <!---------- 车牌识别路由 ---------->
    <el-submenu index="8">
      <!-- 一级菜单 -->
      <template slot="title">
        <!-- 图标 -->
        <i class="iconfont icon-chepaishibie"></i>
        <span class="menu_text">车牌识别</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item index="/platehub">
        <i class="iconfont icon-jiankongbaobiao"></i>
        <span class="menu_text">视频识别 </span>
      </el-menu-item>
      <!-- 二级菜单 -->
      <el-menu-item index="/ptgimg">
        <i class="iconfont icon-tupianshibie"></i>
        <span class="menu_text">图片识别 </span>
      </el-menu-item>
    </el-submenu>

  

  </el-menu>
</template>

<script>
export default {
  name: "Menu",
  // 接收父组件传递的数据
  props: {
    // 类型为字符
    iscle: Boolean,
  },
  data() {
    return {
      iscollapse: this.iscle, // 初始化子组件的 iscollapse 属性为父组件传递的值
    };
  },
  watch: {
    iscle(newVal) {
      this.iscollapse = newVal; // 监听 iscle 属性的变化并更新 iscollapse 的值
    },
  },
};
</script>

<style lang="less" scoped>
i {
  font-size: 18px;
}
.el-menu {
  border-right: none;
}
.menu_text {
  padding-left: 10px;
}
</style>